<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>详细实时数据监控</title>

    <!-- 引入 Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 40px;
            background-image: url("/images/1.jpg");
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }

        /* 半透明遮罩 */
        body::before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.5);
            z-index: -1;
        }

        h1 {
            text-align: center;
            margin-bottom: 40px;
        }

        .chart-container {
            width: 90%;
            max-width: 1200px;
            margin: auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            gap: 30px;
        }

        .chart-card {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
            width: 45%;
            min-width: 300px;
        }

        canvas {
            width: 100% !important;
            height: 200px !important;
        }
    </style>
</head>
<body>

<h1>详细实时数据监控</h1>

<div class="chart-container">

    <!-- 商品类别库存数量 -->
    <div class="chart-card">
        <h3>各商品类别库存数量</h3>
        <canvas id="categoryChart"></canvas>
    </div>

    <!-- 累计上架数量前五 -->
    <div class="chart-card">
        <h3>各商品累计上架数前五</h3>
        <canvas id="inCountChart"></canvas>
    </div>

    <!-- 累计下架数量前五 -->
    <div class="chart-card">
        <h3>各商品累计下架数前五</h3>
        <canvas id="outCountChart"></canvas>
    </div>

    <!-- 可以预留第四个图表 -->
    <div class="chart-card">
        <h3>示例扩展图表（可替换）</h3>
        <canvas id="exampleChart"></canvas>
    </div>

</div>

<script>
    // 公共函数：获取上下文并初始化柱状图
    function initBarChart(canvasId, labels, labelName = "数量") {
        const ctx = document.getElementById(canvasId).getContext('2d');
        return new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: labelName,
                    data: [],
                    backgroundColor: 'rgba(52, 152, 219, 0.7)',
                    borderColor: 'rgba(52, 152, 219, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: value => value.toLocaleString()
                        }
                    }
                },
                plugins: {
                    legend: { display: false }
                }
            }
        });
    }

    let categoryChart = initBarChart("categoryChart", []);
    let inCountChart = initBarChart("inCountChart", [], "上架数量");
    let outCountChart = initBarChart("outCountChart", [], "下架数量");

    // 获取数据并更新图表
    function fetchDataAndUpdate() {
        fetch('/api/recommend/monitor/data')
            .then(res => res.json())
            .then(data => {
                if (!data) return;

                // 1. 类别库存
                const categoryLabels = data.categories.map(c => c.category);
                const categoryCounts = data.categories.map(c => c.count);

                categoryChart.data.labels = categoryLabels;
                categoryChart.data.datasets[0].data = categoryCounts;
                categoryChart.update();

                // 2. 上架前五
                const inTop5 = data.inOutList.sort((a, b) => b.in_count - a.in_count).slice(0, 5);
                const inLabels = inTop5.map(i => i.gname);
                const inCounts = inTop5.map(i => i.in_count);

                inCountChart.data.labels = inLabels;
                inCountChart.data.datasets[0].data = inCounts;
                inCountChart.data.datasets[0].backgroundColor = 'rgba(46, 204, 113, 0.7)';
                inCountChart.data.datasets[0].borderColor = 'rgba(46, 204, 113, 1)';
                inCountChart.update();

                // 3. 下架前五
                const outTop5 = data.inOutList.sort((a, b) => b.out_count - a.out_count).slice(0, 5);
                const outLabels = outTop5.map(i => i.gname);
                const outCounts = outTop5.map(i => i.out_count);

                outCountChart.data.labels = outLabels;
                outCountChart.data.datasets[0].data = outCounts;
                outCountChart.data.datasets[0].backgroundColor = 'rgba(231, 76, 60, 0.7)';
                outCountChart.data.datasets[0].borderColor = 'rgba(231, 76, 60, 1)';
                outCountChart.update();
            })
            .catch(err => console.error("请求失败", err));
    }

    // 页面加载后初始化 + 每2秒刷新一次
    window.addEventListener('DOMContentLoaded', () => {
        fetchDataAndUpdate();
        setInterval(fetchDataAndUpdate, 2000);
    });
</script>

</body>
</html>
